<template>
  <div class="Box">
    <!-- 搜索框 -->
    <div class="searchBox">
      <div>
        <div> 
          <div class="address" @click="GoToPage('/pages/citylist/index')">{{city}}</div>
          |
          <div class="seek">
            <span>请在这里输入区域/商圈</span
            ><span><img src="../../static/img/fdj.png" alt="" /></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="bannerBox">
      <view class="page-section-spacing">
        <swiper
          class="swiper"
          :indicator-dots="false"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
          indicator-color="rgb(0,0,0,.3)"
          indicator-active-color="#f00"
          circular
          
        >
          <swiper-item v-for="(item, index) in bannerImgsData" :key="index">
            <view class="swiper-item uni-bg-red">
              <img :src="item" alt="" />
            </view>
          </swiper-item>
        </swiper>
      </view>
    </div>
    <!-- 分类 -->
    <div class="classify">
      <div>
        <div
          v-for="(item, index) in classifyImgsData"
          :key="index"
          class="classifyItem"
        >
          <img :src="item.ico" alt="" @click="GoToPage(item.path)" />
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
    <div class="houseBox">
      <!-- 楼市资讯 -->
      <div>
        <li>
          <h1>楼市资讯</h1>
          <span @click="GoToPage('/pages/informationdetail/index')"
            >更多<van-icon name="arrow"
          /></span>
        </li>
        <ul class="zixun">
          <li
            v-for="item in zixun"
            :key="item.id"
            @click="GoToPage('/pages/informationdetail/index')"
          >
            <img src="../../static/img/动态.png" alt="" />
            <div>{{ item.title }}</div>
          </li>
        </ul>
      </div>
      <!-- 附近房源 -->
      <div>
        <li>
          <h1>附近房源</h1>
          <span>更多<van-icon name="arrow" /></span>
        </li>
        <div class="nearby">
          <div
            class="nearbyItem"
            v-for="item in housesList"
            :key="item.bizcircle_id"
          >
            <div>
              <img :src="item.img_url" alt="" />
              <p class="type_cn">{{ item.type_cn }}</p>
            </div>
            <p class="resblock_name">{{ item.resblock_name }}</p>
            <p class="desc">{{ item.desc }}</p>
            <p class="price_str">{{ item.price_str }}</p>
          </div>
        </div>
      </div>
      <!-- 新房楼盘 -->
      <div>
        <li>
          <h1>热门楼盘</h1>
          <span @click="GoToPage('/pages/newhouse/newhouse')"
            >更多<van-icon name="arrow"
          /></span>
        </li>
        <div class="newHouse">
          <div class="newHouseItem" v-for="item in list" :key="item.house_code">
            <div>
              <img :src="item.cover_pic" alt="" />
              <p class="type_cn">{{ item.house_type }}</p>
            </div>
            <p class="resblock_name">{{ item.resblock_name }}</p>
            <p class="desc">{{ item.resblock_frame_area }}</p>
            <p class="price_str">
              {{ item.show_price }}{{ item.show_price_unit }}
            </p>
          </div>
        </div>
      </div>
      <!-- 二手房 -->
      <div>
        <li>
          <h1>二手房</h1>
          <span @click="GoToPage('/pages/ershouhouse/ershouhouse')"
            >更多 <van-icon name="arrow"
          /></span>
        </li>
        <div class="erstwhile"> 
          <div class="erstwhileItem" v-for="item in erstwhile" :key="item.id" @click="GoToPage('/pages/purchase/purchase')">
            <div class="erstwhileItemL">
              <img :src="item.img" alt="" />
              <div v-if="item.info_level == 2" class="jx">
                <img src="../../static/img/精选.png" alt="" />
              </div>
            </div>
            <div class="erstwhileItemR">
              <div class="erstwhileItemRTitle">{{ item.title }}</div>
              <div class="erstwhileItemRBuju">
                <div>
                  <span>{{ item.shi }}室{{ item.ting }}厅{{ item.wei }}卫</span>
                  | <span>{{ item.mianji }}/m </span>
                </div>
                <div>{{ item.community_name }}</div>
              </div>
              <div class="erstwhileItemRLabel">
                <span
                  v-for="(item1, index1) in item.label"
                  :key="index1"
                  :style="{
                    color: ` ${item1.color}`,
                    border: `1px solid ${item1.color}`,
                  }"
                  >{{ item1.name }}</span
                >
              </div>
              <div class="erstwhileItemRFangjia">
                <div>
                  <span :style="{ color: 'red' }">{{ item.fangjia }}</span
                  >万 <span>{{ item.danjia }}</span
                  >元/m
                </div>

                <div>
                  {{ item.begintime }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import list from "../../static/json/xin.json";
import housesList from "../../static/json/housesList.json";
import homeData from "../../static/json/home.json";
import ershouData from "../../static/json/ershou.json";
export default {
  data() {
    return {
      //城市选择数据
      city:"北京",
      //轮播图数据
      bannerImgsData: [
        "https://ke-image.ljcdn.com/newhouse-user-image/25f71bbdf3a2791061ad4d90d99f9997.jpg!m_fill,w_750,h_562,l_fbk",
        "https://ke-image.ljcdn.com/hdic-resblock/33cc5c67-2be2-4ef5-8a53-ae1a291688df.jpg!m_fill,w_750,h_562,l_fbk",
        "https://ke-image.ljcdn.com/newhouse-user-image/dde2f019df12e5b55f2140fda39f2d9d.jpg!m_fill,w_750,h_562,l_fbk",
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      pageSize: 2,
      page: 1,
      //楼市资讯 slice(pageSize * (page - 1), pageSize * page)
      zixun: homeData.news.news,
      // nav导航分类数据
      classifyImgsData: homeData.navs.nav.slice(0, 10),
      //房子数据
      housesList: housesList,
      //新房
      list: list,
      //二手房
      erstwhile: ershouData.list.slice(0, 5),
    };
  },
  onLoad() {
  
   const value = uni.getStorageSync('city');
    if(value!=""){
    
      this.city=value
    }
  },
  
  mounted() {},
  created() {
  },
  methods: {
    //

    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    },
    GoToPage(target) {
      console.log(target);
      uni.redirectTo({
        url: target,
      });
    },
  },
};
//
</script>

<style lang="scss" scoped>
.Box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;

  // 地址搜索框
  .searchBox {
    width: 100%;
    padding: 20rpx 0;
    background: rgb(8, 234, 241);
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      width: 90%;
      > div {
        width: 100%;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        background: #f5f5f5;
        > div {
          height: 60rpx;
          line-height: 60rpx;
          font-size: 28rpx;
          margin: 0 20rpx;
        }
        > .address {
          width: 100rpx;
          text-align: center;
          display: flex;
        }
        > .seek {
          display: flex;
          flex: 1;
          justify-content: space-between;
          > span {
            display: flex;
            align-items: center;
            > img {
              width: 30rpx;
              height: 30rpx;
            }
          }
        }
      }
    }
  }
  //轮播图
  .bannerBox {
    width: 100%;
    height: 260rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    > .page-section-spacing {
      width: 90%;
      swiper-item {
        > .swiper-item {
          height: 260rpx;
          > img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  //分类
  .classify {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      width: 90%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .classifyItem {
        width: 120rpx;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 20rpx 0;
        img {
          width: 100%;
          height: 100rpx;
        }
        p {
          font-size: 30rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
  //新房
  .houseBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    > div {
      width: 90%;
      display: flex;
      flex-direction: column;
      margin: 20rpx 0;
      //标题
      > li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > h1 {
          font-weight: 500;
          font-size: 40rpx;
        }

        > span {
          color: #999;
        }
      }
      //楼市资讯
      .zixun {
        width: 100%;
        height: 200rpx;
        overflow-y: scroll;
        padding: 20rpx 0;
        margin: 10rpx 0;
        box-shadow: 2rpx 4rpx 6rpx 2rpx #999;

        > li {
          display: flex;
          padding: 10rpx 0;
          align-items: center;
          > img {
            width: 100rpx;
            height: 90rpx;
            margin: 0 20rpx;
          }
          > div {
            width: 450rpx;
            font-size: 28rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      > .nearby,
      .newHouse {
        width: 100%;
        display: flex;
        justify-content: space-between;
        //附近房源每一项
        .nearbyItem,
        .newHouseItem {
          width: 200rpx;
          margin: 10rpx;
          display: flex;
          flex-direction: column;
          //图片  类型
          > div {
            width: 100%;
            height: 200rpx;
            position: relative;

            > img {
              width: 100%;
              height: 100%;
            }
            > .type_cn {
              position: absolute;
              bottom: 10rpx;
              right: 10rpx;
              background: #f5f5f5;
              font-size: 20rpx;
              border-radius: 5rpx;
              padding: 0 10rpx;
            }
          }
          > p {
            padding: 10rpx 0;
          }
          > .resblock_name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 30rpx;
          }
          > .desc {
            color: #999;
            font-size: 20rpx;
          }
          > .price_str {
            color: red;
            font-size: 26rpx;
          }
        }
      }
      //二手房
      > .erstwhile {
        width: 100%;
        display: flex;
        flex-direction: column;
        > .erstwhileItem {
          width: 100%;
          padding: 20rpx 0;
          display: flex;
          border-bottom: 1px solid #999;
          //左侧图片
          .erstwhileItemL {
            width: 200rpx;
            display: flex;
            align-items: center;
            margin-right: 10rpx;
            position: relative;

            > img {
              width: 200rpx;
              height: 180rpx;
              border-radius: 20rpx;
            }
            > .jx {
              position: absolute;
              left: -1rpx;
              top: 35rpx;
              img {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }
          // 右侧盒子
          > .erstwhileItemR {
            flex: 1;
            display: flex;
            flex-direction: column;
            > div {
              padding: 5rpx 0;
            }
            .erstwhileItemRTitle {
              font-size: 30rpx;
            }
            .erstwhileItemRBuju {
              font-size: 24rpx;
              span {
                margin-right: 20rpx;
              }
              span:nth-child(2) {
                margin-left: 20rpx;
              }
            }
            .erstwhileItemRLabel {
              span {
                font-size: 24rpx;
                margin-right: 20rpx;
              }
            }
            .erstwhileItemRFangjia {
              display: flex;
              justify-content: space-between;
              > div {
                font-size: 30rpx;
                > span {
                  font-size: 30rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
